<template>
  <laker-dialog
    v-model="visible"
    title="事故事件统计分析"
    width="90%"
    :show-fullscreen="true"
    :show-close="true"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-row>
      <el-col :span="8">
        <LakerEcharts ref="wchart" :option="option" width="100%" height="300px" @chartOnclick="jbChartOnclick" />
      </el-col>
      <el-col :span="8">
        <LakerEcharts ref="wchart" :option="option2" width="100%" height="300px" @chartOnclick="yyChartOnclick" />
      </el-col>
      <el-col :span="8">
        <LakerEcharts ref="wchart" :option="option3" width="100%" height="300px" @chartOnclick="zyChartOnclick" />
      </el-col>
      <el-col :span="24">
        <table class="laker-table">
          <tr>
            <th colspan="3">事件信息</th>
            <th rowspan="2">行动项</th>
            <th rowspan="2">经验反馈</th>
            <th rowspan="2">隐患排查</th>
          </tr>
          <tr>
            <th style="width: 100px">编号</th>
            <th style="width: 100px">班组</th>
            <th>事件名称</th>
          </tr>
          <tr v-for="(item, index) in dataList" :key="index">
            <td>{{ item.detailCode }}</td>
            <td>{{ item.cstName }}</td>
            <td>{{ item.sjName }}</td>
            <td>{{ item.sjName }}</td>
            <td>{{ item.jyfkName }}</td>
            <td>{{ item.yhName }}</td>
          </tr>
        </table>
      </el-col>
    </el-row>
  </laker-dialog>
  <sgsjjb-table ref="jbDialogRef" v-if="dialog.jbtable" @closed="dialog.jbtable = false"></sgsjjb-table>
  <sgsjzy-table ref="zyDialogRef" v-if="dialog.zytable" @closed="dialog.zytable = false"></sgsjzy-table>
  <sgsjyy-table ref="yyDialogRef" v-if="dialog.yytable" @closed="dialog.yytable = false"></sgsjyy-table>
</template>

<script>
import LakerDialog from '@/components/lakerDialog/index.vue'
import LakerEcharts from '@comp/lakerEcharts/index.vue'
import dprevent from '@/api/dprevent'
import SgsjjbTable from './SgsjjbTable.vue'
import SgsjyyTable from './SgsjyyTable.vue'
import SgsjzyTable from './SgsjzyTable.vue'

export default {
  name: 'SgsjChart',
  components: { LakerDialog, LakerEcharts, SgsjjbTable, SgsjyyTable, SgsjzyTable },
  emits: ['success', 'closed'],
  data() {
    return {
      dialog: {
        jbtable: false,
        yytable: false,
        zytable: false
      },
      mode: 'add',
      visible: false,
      dataList: [],
      option: {
        title: {
          text: '事件级别',
          x: 'center',
          textStyle: {
            fontSize: 16
          }
        },
        // backgroundColor: '#6c6c6c',
        grid: {
          top: '40',
          left: '40',
          right: '10',
          bottom: '50'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['公司领导', '安环部', '生技部', '运行分厂', '外委单位']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '事故数量',
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              color: '#ccc'
            },
            data: [165, 187, 162, 162, 162]
          }
        ]
      },
      option2: {
        // backgroundColor: '#6c6c6c',
        title: {
          text: '事件原因',
          x: 'center',
          textStyle: {
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            label: {
              show: true,
              formatter: '{b}\n{c}项,{d}%',
              color: '#ffffff'
            },
            labelLine: {
              show: true
            },
            data: [
              { value: 1048, name: '设备设施' },
              { value: 735, name: '人身伤害' },
              { value: 580, name: '安全管理' },
              { value: 484, name: '环境汚染' }
            ]
          }
        ]
      },
      option3: {
        // backgroundColor: '#6c6c6c',
        title: {
          text: '事件专业',
          x: 'center',
          textStyle: {
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            label: {
              show: true,
              formatter: '{b}\n{c}项,{d}%',
              color: '#ffffff'
            },
            labelLine: {
              show: true
            },
            data: [
              { value: 1048, name: '设备设施' },
              { value: 735, name: '人身伤害' },
              { value: 580, name: '安全管理' },
              { value: 484, name: '环境汚染' }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    this.getApiData()
  },
  methods: {
    getApiData() {
      dprevent.getSgsjChart().then((res) => {
        console.log(res)
        if (res.code === 'success') {
          if (res.result) {
            let data = res.result.sjjb
            this.option.xAxis.data = data.map((item) => item.name)
            this.option.series[0].data = res.result.sjjb
            this.option2.series[0].data = res.result.sjyy
            this.option3.series[0].data = res.result.sjzy
          }
        }
      })
      dprevent.getSgsjDetailList().then((res) => {
        if (res.code === 'success') {
          if (res.result) {
            this.dataList = res.result
          }
        }
      })
    },
    //显示
    open(mode = 'add') {
      this.mode = mode
      this.visible = true
      return this
    },
    close() {
      this.visible = false
      return this
    },
    //表单注入数据
    setData(data) {
      console.log(data)
    },
    openDetail(item) {
      this.dialog.siTable = true
      this.$nextTick(() => {
        this.$refs.siTableRef.open('show').setData(item)
      })
    },
    jbChartOnclick(params) {
      this.dialog.jbtable = true
      this.$nextTick(() => {
        this.$refs.jbDialogRef.open('show').setData(params)
      })
    },
    yyChartOnclick(params) {
      this.dialog.yytable = true
      this.$nextTick(() => {
        this.$refs.yyDialogRef.open('show').setData(params)
      })
    },
    zyChartOnclick(params) {
      this.dialog.zytable = true
      this.$nextTick(() => {
        this.$refs.zyDialogRef.open('show').setData(params)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.el-col {
  padding: 2px;
}
</style>
